<template>
  <el-container class='elheight'>
    <el-aside class='appTree'>
      <app-tree v-bind:tree-data="treeData"
                v-on:appTreeClick="treeClickHandle"></app-tree>
    </el-aside>
    <el-main>
      <el-container>
        <el-header class="dzy-main-header">
          <div class="btn-group-el">
            <btn-group :currentSelectedData="currentSelectedData"
                       @btnClickCallback="btnClickCallback"></btn-group>
          </div>
          <div class="dzy-custom-search-box">
            <div>名称/编号：<el-input placeholder="请输入院落名称/编号"
                        v-model="queryData.courtyardNo"
                        clearable
                        class="dzy-custom-input"></el-input>
            </div>
            <div>房主名称：<el-input placeholder="请输入房主名称"
                        v-model="queryData.homeownerName"
                        clearable
                        class="dzy-custom-input"></el-input>
            </div>
            <div>身份证：<el-input placeholder="请输入房主身份证"
                        v-model="queryData.homeownerIdCard"
                        clearable
                        class="dzy-custom-input"></el-input>
            </div>
            <div>电话：<el-input placeholder="请输入房主电话"
                        v-model="queryData.homeownerPhone"
                        clearable
                        class="dzy-custom-input"></el-input>
            </div>
            <div>
              是否出租：
              <el-select v-model="queryData.rentStatus" placeholder="请选择是否出租" filterable clearable>
                <el-option :key="0" label="否" :value="0"></el-option>
                <el-option :key="1" label="是" :value="1"></el-option>
              </el-select>
            </div>
            <div>
              <el-button @click="searchHandleClick"
                         type="primary"
                         icon="el-icon-search">查询</el-button>
            </div>
          </div>
        </el-header>
        <el-main>
          <app-table :page-data="pageData"
                     :table-columns="tableColumns"
                     v-on:currentChange="handleCurrentChange"
                     v-on:handleCheckedRows="handleCheckedRows"
                     v-on:checkSingleRow="checkSingleRow"
                     v-on:changeSingleRow="changeSingleRow"
                     v-on:deleSingleRow="deleSingleRow" />
          <el-dialog :title="dialogTitle"
                     :visible.sync="dialogFormVisible"
                     :before-close="close">
            <el-collapse v-model="activeNames">
              <el-collapse-item name="1"
                                title='院落信息'>
                <el-form :model="formData"
                         :rules="rules"
                         ref="formData"
                         :disabled="showOnly"
                         label-width="140px"
                         size="mini">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="网格"
                                    prop="allGridIdArr">
                        <!-- <grid-cascader v-model="formData.allGridId"
                                       @changeGrid="handleGridCascader"></grid-cascader> -->
                        <div class="block">
                          <el-cascader placeholder="请选择"
                            :options="treeOption"
                            filterable
                            clearable
                            :props="gridIdProps"
                            v-model="formData.allGridIdArr"
                            @change="handleGridCascader">
                          </el-cascader>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="院落名称/编号"
                                    prop="courtyardNo">
                        <el-input v-model="formData.courtyardNo"
                                  placeholder="院落名称/编号"
                                  @blur="handleCourtyard"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="院落面积(㎡)"
                                    prop="area">
                        <el-input v-model="formData.area"
                                  placeholder="请输入住宅面积(㎡)"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="院落用途"
                                    prop="houseUse">
                        <el-select filterable
                                   v-model="formData.houseUse"
                                   placeholder="请选择院落用途"
                                   :disabled="showPart">
                          <el-option v-for="item in dictData.buildingType"
                                     :key="item.id"
                                     :value="item.code"
                                     :label="item.name"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="是否出租"
                                    prop="rentStatus">
                        <el-select filterable
                                   v-model="formData.rentStatus"
                                   placeholder="请选择是否出租">
                          <el-option :value=0
                                     :key=0
                                     label="否"></el-option>
                          <el-option :value=1
                                     :key=1
                                     label="是"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="证件代码"
                                    prop="certificateCode">
                        <el-select filterable
                                   v-model="formData.certificateCode"
                                   placeholder="证件代码">
                          <el-option v-for="item in ideferCodeData"
                                     :key="item.code"
                                     :value="item.code"
                                     :label="item.name"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="房主证件号"
                                    prop="homeownerIdCard"
                                    :rules="formData.certificateCode==='414'?[{required: true,message: '请输入护照号',trigger: 'blur'}]:[{validator: validateIdefer,message: '请输入身份证号',trigger: 'blur'}]">
                        <el-input v-model="formData.homeownerIdCard"
                                  placeholder="请输入身份证"
                                  @blur="checkIdCard"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="房主名称"
                                    prop="homeownerName">
                        <el-input v-model="formData.homeownerName"
                                  :readonly='readonly'
                                  placeholder="请输入房主名称"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="联系电话"
                                    prop="homeownerPhone">
                        <el-input v-model="formData.homeownerPhone"
                                  placeholder="请输入联系电话"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="选择经纬度"
                                prop="longitude">
                        <el-col :span="8">
                          <el-input v-model="formData.longitude"
                                    :disabled="true"
                                    placeholder="经度"></el-input>
                        </el-col>
                        <el-col :span="1"
                                style="text-align: center">-</el-col>
                        <el-col :span="7">
                          <el-input v-model="formData.latitude"
                                    :disabled="true"
                                    placeholder="纬度"></el-input>
                        </el-col>
                        <el-col :span="8">
                          <el-button type="text"
                                    @click="openSimpleMap">从地图选择</el-button>
                        </el-col>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="院落地址"
                                    prop="address">
                        <el-input v-model="formData.address"
                                  placeholder="请输入院落地址"></el-input>
                      </el-form-item>
                    </el-col>
                    <!-- <el-col :span="24">
                      <el-form-item label="现居住地址"
                                    prop="homeownerLiveAddr">
                        <el-input v-model="formData.homeownerLiveAddr"
                                  placeholder="请输入现居住地址"></el-input>
                      </el-form-item>
                    </el-col> -->
                    <el-col :span="24">
                      <el-form-item label="备注"
                                    style="width:100%"
                                    prop="remark">
                        <el-input v-model="formData.remark"
                                  type="textarea"
                                  :rows="3"
                                  placeholder="请输入备注"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="照片">
                        <app-upload ref="picture"
                                    v-model="formData.picture"></app-upload>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-collapse-item>
              <el-collapse-item name="2"
                                v-if="popShow"
                                title='人房关联'>
                <el-form :model="popFormData"
                         :rules="rules"
                         ref="popFormData"
                         :disabled="showOnly"
                         label-width="120px"
                         size="mini">
                  <el-col :span="12">
                    <el-form-item label="证件代码"
                                  prop="certificateCode">
                      <el-select filterable
                                 v-model="popFormData.certificateCode"
                                 placeholder="证件代码"
                                 @change="getType">
                        <el-option v-for="item in ideferCodeData"
                                   :key="item.code"
                                   :value="item.code"
                                   :label="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="证件号码"
                                  prop="certificateNumber"
                                  :rules="popFormData.certificateCode==='414'?[{required: true,message: '请输入护照号',trigger: 'blur'}]:[{validator: validateIdefer,message: '请输入身份证号',trigger: 'blur'}]">
                      <el-input v-model="popFormData.certificateNumber"
                                placeholder="请输入身份证号"
                                @input="getCerCode"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="操作">
                      <el-button @click="addPop">添加信息</el-button>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-table :data="popTableData"
                              header-row-class-name="popTablleName"
                              @row-click="handleUnitTableClickEvent">
                      <el-table-column v-for="(item, index) in popTableColumns"
                                       :key="index"
                                       :prop="item.prop"
                                       :formatter="item.formatter"
                                       :label="item.label"
                                       :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column label="操作"
                                       fixed="right"
                                       width="100"
                                       v-if="pageData.isCommonDo">
                        <template slot-scope="scope">
                          <el-button size="mini"
                                     type="danger"
                                     @click="deleSinglePop(scope.$index,popTableData)">取消关联</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-form>
              </el-collapse-item>
            </el-collapse>
            <div v-if="!showOnly"
                 slot="footer"
                 class="dialog-footer">
              <el-button @click="cancel('formData')">取 消</el-button>
              <el-button type="primary"
                         :disabled="showOnly"
                         @click="save('formData')">提 交</el-button>
            </div>
          </el-dialog>
          <el-dialog class="dialog-body-mini"
                     :visible.sync="showMap"
                     title="院落标记"
                     width="70%"
                     top="8vh"
                     :before-close="mapCancel">
            <edit-map v-if="showMap"
                      :mode="mapMode"
                      @appMapCallback="appMapCallback"
                      :target="mapTarget"
                      :row-id="currentSelectedRowId"></edit-map>
          </el-dialog>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import AppTree from '@/components/common/AppTree'
import BtnGroup from '@/components/BtnGroup'
import AppTable from '@/components/AppTable'
import EditMap from '@/components/EditMap'
import GridCascader from '@/components/GridCascader'
import AppUpload from '@/components/AppUpload'
import { getCaseAllGridIdByGridTreeData, isCommonDo } from '@/utils/CommonUtil'
import { findCourtyard, updateCourtyard, deleteCourtyard, createCourtyard } from '@/http/FangWuGuanLiApi'
import { createMapLocation, updateMapLocation } from '@/http/AppApi'
import { getUserGridTree } from '@/utils/SessionDataUtil'
import { validatePhone, validateIdefer, validateHouse } from '@/utils/validate'
import DictDataUtil from '@/utils/DictDataUtil'
import { getPopulation, getPopCDetail, addPopCDetail, deletePopCDetail, findPopCDetail } from '@/http/PopulationApi'
import { getDictDataOption } from '@/utils/getDictDataOption'
import { getAllRegion, getAllRegionObj } from '@/utils/region'
export default {
  data () {
    return {
      tableData: [],
      pageData: {},
      formData: {},
      popFormData: {},
      tempParm: {},
      popTableData: [],
      currentSelectedRowId: '',
      mapMode: 'point',
      gridIdProps: {
        label: 'name',
        value: 'id'
      },
      treeOption: [],
      address: {
        address: '',
        area: ''
      },
      queryData: {},
      treeData: [],
      ideferCodeData: [],
      dialogTitle: '',
      dialogFormVisible: false,
      currentSelectedData: [],
      showOnly: false,
      showPart: false,
      showMap: false,
      readonly: false,
      popShow: false,
      mapTarget: {},
      mapPathList: [],
      mapHackReset: false,
      dictData: {},
      activeNames: ['1'],
      tableColumns: [
        { label: '院落名称/编号', prop: 'courtyardNo' },
        { label: '房主名称', prop: 'homeownerName' },
        { label: '房主身份证', prop: 'homeownerIdCard' },
        { label: '联系电话', prop: 'homeownerPhone' }
      ],
      popTableColumns: [
        { label: '姓名', prop: 'name' },
        { label: '性别', prop: 'gender', formatter: this.filterSex },
        { label: '证件类型', prop: 'certificateType', formatter: this.filterIdType },
        { label: '证件号', prop: 'certificateNumber' },
        { label: '人口类型', prop: 'populationType' }
      ],
      rules: {
        allGridIdArr: [{
          required: true,
          message: '选择网格',
          trigger: 'blur'
        }],
        courtyardNo: [{
          required: true,
          message: '请输入院落名称/编号',
          trigger: 'blur'
        }],
        longitude: [{
          required: true,
          message: '请填写经纬度',
          trigger: 'blur'
        }],
        latitude: [{
          required: true,
          message: '请填写经纬度',
          trigger: 'blur'
        }],
        area: [{
          required: true,
          message: '请输入院落面积',
          trigger: 'blur'
        }],
        houseUse: [{
          required: true,
          message: '请输入院落用途',
          trigger: 'blur'
        }],
        certificateNumber: [{
          required: true,
          message: '请输入证件号码',
          trigger: 'blur'
        }],
        homeownerName: [{
          required: true,
          message: '请输入房主',
          trigger: 'blur'
        }],
        homeownerPhone: [{
          required: false,
          validator: validatePhone,
          message: '请输入联系电话',
          trigger: 'blur'
        }],
        address: [{
          required: true,
          message: '请输入院落地址',
          trigger: 'blur'
        }],
        // homeownerLiveAddr: [{
        //   required: false,
        //   message: '请输入当前居住地址',
        //   trigger: 'blur'
        // }],
        rentStatus: [{
          required: true,
          message: '请选择',
          trigger: 'blur'
        }]
      }
    }
  },
  components: {
    AppTree,
    BtnGroup,
    AppTable,
    EditMap,
    GridCascader,
    AppUpload
  },
  mounted () {
    this.getTableData()
    this.getTreeData()
    this.ideferCodeData = getDictDataOption('证件代码')
  },
  methods: {
    validateIdefer (rule, value, callback, flag) {
      validateIdefer(rule, value, callback, flag)
    },
    validateHouse (rule, value, callback) {
      validateHouse(rule, value, callback)
    },
    filterSex (row, column) {
      let genderOption = getDictDataOption('性别')
      let resGender = ''
      for (let i = 0; i < genderOption.length; i++) {
        if (genderOption[i].code === row.gender) {
          resGender = genderOption[i].name
          break
        }
      }
      return resGender
    },
    filterIdType (row, column) {
      let type = ''
      for (let i = 0; i < this.ideferCodeData.length; i++) {
        const element = this.ideferCodeData[i]
        if (row.certificateType === element.code) {
          type = element.name
          break
        }
      }
      return type
    },
    save (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          if (this.formData) {
            this.beforeSubmit()
            if (this.formData.id) {
              updateCourtyard(this.formData).then(resp => {
                if (resp.code && resp.code === '200') {
                  this.getTableData()
                  this.cancel(formName)
                  this.$message({
                    type: 'success',
                    message: '修改成功'
                  })
                }
              })
            } else {
              createCourtyard(this.formData).then(resp => {
                if (resp.code && resp.code === '200') {
                  this.getTableData()
                  this.cancel(formName)
                  this.dialogFormVisible = false
                  this.$refs[formName].resetFields()
                  this.$message({
                    type: 'success',
                    message: '添加成功'
                  })
                }
              })
            }
          }
        }
      })
    },
    del (rows) {
      if (rows && rows instanceof Array && rows.length > 0) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rows.forEach(row => {
            deleteCourtyard(row).then(resp => {
              if (resp.code && resp.code === '200') {
                this.getTableData()
              }
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    cancel (formName) {
      this.mapCancel()
      this.dialogFormVisible = false
      this.formData = {}
      this.showMap = false
      this.mapHackReset = false
      this.$refs[formName].resetFields()
      this.popTableData = []
    },
    close () {
      this.mapCancel()
      this.dialogFormVisible = false
      this.formData = {}
      this.showMap = false
      this.mapHackReset = false
      this.$refs['formData'].resetFields()
      this.popTableData = []
    },
    getTableData () {
      let param = this.queryData
      findCourtyard(param).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data) {
            this.pageData = data
            isCommonDo(this.pageData, this)
            if (this.pageData.items && this.pageData.items instanceof Array) {
              this.tableData = this.pageData.items
            }
          }
        }
      })
    },
    beforeSubmit () {
      if (this.formData.allGridIdArr && this.formData.allGridIdArr.length !== 0) {
        let liveIndex = this.formData.allGridIdArr.length - 1
        let liveData = {}
        liveData.id = this.formData.allGridIdArr[liveIndex]
        liveData.items = this.treeData
        liveData.isGetAllId = true
        this.formData.allGridId = getAllRegion(liveData)
      } else {
        this.formData.allGridId = ''
      }
      return true
    },
    handleCurrentChange (val) {
      this.queryData.offset = (val - 1) * 10
      this.getTableData()
    },
    getTreeData () {
      let gridTree = getUserGridTree()
      if (gridTree && gridTree instanceof Array) {
        this.treeData = gridTree
        this.treeOption = gridTree
      }
    },
    treeClickHandle (data) {
      this.queryData = {}
      this.queryData.likeAllGridId = data.id
      this.getTableData()
      this.formData.allGridId = getCaseAllGridIdByGridTreeData(data)
      this.formData.allGridIdArr = this.formData.allGridId.split(',')
    },
    handleGridCascader (data) {
      if (data) {
        let arr = data
        let regionData = {}
        regionData.id = arr[arr.length - 1]
        regionData.items = this.treeData
        let temp = getAllRegionObj(regionData)
        this.address.address = ''
        for (let i = 0; i < temp.length; i++) {
          const element = temp[i]
          this.address.address += element.name + ' '
        }
        this.$set(this.formData, 'address', this.address.address + this.address.area)
      }
    },
    handleCourtyard (event) {
      let value = event.srcElement.value
      if (value) {
        this.address.area = value + ' '
      }
      this.$set(this.formData, 'address', this.address.address + this.address.area)
    },
    btnClickCallback (callbackData) {
      if (callbackData.btnType === 'delete') {
        this.dialogFormVisible = false
        let rows = callbackData.rows
        this.del(rows)
      } else if (callbackData.btnType === 'draw') {
        let rowData = callbackData.rows[0]
        if (!rowData) {
          alert('请选择数据')
          return
        }
        this.mapHackReset = true
        this.showMap = true
        let target = {}
        this.mapMode = 'full'
        target.targetId = rowData.id
        target.targetType = 'Courtyard'
        this.mapTarget = target
      } else {
        this.getDictData()
        this.showOnly = callbackData.sohwOnly
        this.dialogTitle = callbackData.dialogTitle
        this.dialogFormVisible = true
        this.popShow = false
        if (callbackData.btnType === 'post') {
          this.formData = this.formData.allGridId ? this.formData : {}
        } else {
          this.popShow = true
          let tempData = {}
          for (const key in callbackData.rows[0]) {
            if (callbackData.rows[0].hasOwnProperty(key)) {
              tempData[key] = callbackData.rows[0][key]
            }
          }
          this.formData = tempData
          let regionData = {}
          regionData.id = this.formData.gridId
          regionData.items = this.treeData
          let gridIdArr = getAllRegion(regionData)
          this.$set(this.formData, 'allGridIdArr', gridIdArr)
          let temp = getAllRegionObj(regionData)
          this.address.address = ''
          for (let i = 0; i < temp.length; i++) {
            const element = temp[i]
            this.address.address += element.name + ' '
          }
          this.address.area = this.formData.courtyardNo + ' '
          this.$set(this.formData, 'addressDetail', this.address.address + this.address.area)
          findPopCDetail(this.formData.id).then(resp => {
            if (resp.code && resp.code === '200') {
              let data = resp.data
              if (data) this.popTableData = data.items
            }
          })
        }
      }
    },
    checkSingleRow: function (callbackData) {
      this.btnClickCallback(callbackData)
    },
    changeSingleRow: function (callbackData) {
      this.btnClickCallback(callbackData)
    },
    deleSingleRow: function (callbackData) {
      this.btnClickCallback(callbackData)
    },
    handleCheckedRows (rows) {
      if (rows && rows instanceof Array && rows.length > 0) {
        this.currentSelectedData = rows
        this.formData = rows[0]
        this.currentSelectedRowId = rows[0].id
      }
    },
    getDictData () {
      this.dictData.buildingType = DictDataUtil.getBuildingType()
    },
    appMapCallback (appMapInfo) {
      if (appMapInfo.target) {
        if (appMapInfo.target.targetId) {
          let mapLocation = {}
          if (appMapInfo.poly && appMapInfo.poly instanceof Array && appMapInfo.poly.length > 0) {
            let length = appMapInfo.poly.length
            this.saveMapLocationInfoByArray(0, length, appMapInfo)
          } else {
            mapLocation = this.appMapInfo2MapLocation(appMapInfo)
            this.saveMapLocationInfo(mapLocation)
          }
        } else {
          this.showOnly = false
          this.showMap = false
          this.$set(this.formData, 'latitude', appMapInfo.lnglat.lat)
          this.$set(this.formData, 'longitude', appMapInfo.lnglat.lng)
        }
      }
      return ''
    },
    appMapInfo2MapLocation (appMapInfo) {
      let mapLocation = {}
      mapLocation.targetId = appMapInfo.target.targetId
      mapLocation.targetType = appMapInfo.target.targetType

      if (!appMapInfo.poly) {
        mapLocation.mapArea = appMapInfo.polyPathArr
        mapLocation.mapColor = appMapInfo.polyColor
        // 地图信息id存在则不允许修改targetId和targetType
        if (appMapInfo.id) {
          mapLocation.id = appMapInfo.id
          delete mapLocation.targetId
          delete mapLocation.targetType
        }
      }
      if (appMapInfo.clearStatus) {
        mapLocation.clearStatus = appMapInfo.clearStatus
      }
      if (appMapInfo.markPosition) {
        mapLocation.longitude = appMapInfo.markPosition.lng
        mapLocation.latitude = appMapInfo.markPosition.lat
        if (appMapInfo.id) {
          mapLocation.id = appMapInfo.id
        }
      }
      return mapLocation
    },
    saveMapLocationInfoByArray (i, length, appMapInfo) {
      if (i >= length) {
        return
      }
      let mapLocation = {}
      mapLocation = this.appMapInfo2MapLocation(appMapInfo)
      mapLocation.mapArea = appMapInfo.poly[i].polyPathArr
      mapLocation.mapColor = appMapInfo.poly[i].polyColor
      mapLocation.id = appMapInfo.poly[i].id
      if (mapLocation.id) {
        delete mapLocation.targetId
        delete mapLocation.targetType
      }
      i++
      let data = mapLocation
      console.log('maplocation id = ' + mapLocation.id)
      if (mapLocation.id) {
        updateMapLocation(data).then(resp => {
          if (resp.code && resp.code === '200') {
            console.log('修改成功')
            this.saveMapLocationInfoByArray(i, length, appMapInfo)
          } else {
            console.log(resp.message)
          }
        })
      } else {
        createMapLocation(data).then(resp => {
          if (resp.code && resp.code === '200') {
            console.log('保存成功')
            this.saveMapLocationInfoByArray(i, length, appMapInfo)
          } else {
            console.log(resp.message)
          }
        })
      }
    },
    saveMapLocationInfo (mapLocation) {
      if (mapLocation.id) {
        updateMapLocation(mapLocation).then(resp => {
          if (resp.code && resp.code === '200') {
            console.log('修改成功')
          } else {
            console.log(resp.message)
          }
        })
      } else {
        createMapLocation(mapLocation).then(resp => {
          if (resp.code && resp.code === '200') {
            console.log('保存成功')
          }
        })
      }
      this.mapCancel()
    },
    mapCancel () {
      this.mapHackReset = false
      this.showMap = false
    },
    searchHandleClick () {
      this.queryData.offset = 0
      this.getTableData()
    },
    openSimpleMap () {
      this.mapMode = 'simple'
      this.showMap = true
      this.mapHackReset = true
    },
    checkIdCard (event) {
      let value = event.srcElement.value
      getPopulation(value).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          this.readonly = true
          this.$set(this.formData, 'homeownerName', data.name)
          this.$set(this.formData, 'homeownerPhone', data.phone)
          this.$set(this.formData, 'homeownerLiveAddr', data.currentAddrDetail)
          return
        }
        this.readonly = false
      })
    },
    handleUnitTableClickEvent (row, column, event) {
      this.unitFormData = row
    },
    getType (value) {
      this.tempParm.type = value
    },
    getCerCode (value) {
      this.tempParm.num = value
    },
    addPop () {
      if (!this.tempParm.type || !this.tempParm.num) {
        this.$message({
          message: '请先填写增加信息',
          type: 'warning'
        })
        return false
      }
      this.tempParm.gridId = this.formData.allGridId.split(',')[3]
      getPopCDetail(this.tempParm).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          let param = { id: this.formData.id, item: data, gridId: this.formData.gridId }
          addPopCDetail(param).then(resp => {
            if (resp.code && resp.code === '200') {
              let flag = 1
              for (let i = 0; i < this.popTableData.length; i++) {
                const element = this.popTableData[i]
                if (element.certificateNumber === this.tempParm.num) {
                  this.$message({
                    message: '请不要重复添加',
                    type: 'warning'
                  })
                  flag = 0
                }
              }
              if (flag === 1) {
                this.popTableData.push(data)
              }
              this.tempParm = {}
              this.popFormData = {}
            }
          })
        } else if (resp.code === '404') {
          this.$message({
            message: '该人信息不存在',
            type: 'warning'
          })
        }
      })
    },
    deleSinglePop (index, item) {
      let param = { id: this.formData.id, item: item[index] }
      deletePopCDetail(param).then(resp => {
        if (resp.code && resp.code === '200') {
          this.popTableData.splice(index, 1)
        }
      })
    }
  },
  computed: {},
  watch: {}
}
</script>
<style scoped>
.el-form >>> .el-input__inner {
  height: 37px !important;
}
.el-form >>> .el-form-item__label {
  line-height: 37px !important;
}
.el-form >>> .el-cascader__label {
  line-height: 37px !important;
}
.el-table >>> .popTablleName th .cell {
  white-space: nowrap;
  color: #fff;
  font-weight: normal;
}
</style>
